<template>
  <div class="header-container f-r-cc" :class="[is_home && localStore.innerWidth > 768 ? 'is-home' : '',is_home && !user_store.show_head ? 'hide' : 'show',drawerMenu ? 'menu' : '']">
    <div class="header-wrap f-r-sbc">

      <el-icon @click="openMenu" class="cursor" :color="drawerMenu ? '#fff' : '#000'" :size="24" v-if="localStore.innerWidth < 768">
        <Fold v-if="drawerMenu"/>
        <Expand v-else/>
      </el-icon>

      <div class="header-info f-r-dc">
        <img
          src="@/assets/img/banner/banner-logo.png"
          class="header-logo cursor"
          @click="toPage('Home')"
          alt=""
        />
        <div class="header-nav f-r-sbc">
          <div
            class="header-nav-item cursor"
            @click="navChange(index, item)"
            :class="current_nav == index ? 'active' : ''"
            v-for="(item, index) in nav_list"
            :key="index"
          >
            {{ item.name }}
          </div>
        </div>
      </div>

      <div class="header-btns f-r-cc" :class="user_store.is_login && localStore.innerWidth <= 768 ? 'hide' : ''">
        <div class="btn-down f-r-cc cursor" @click="download">下载APP</div>
        <div class="btn-login f-r-cc cursor" @click="toLogin" v-if="!user_store.is_login">登录</div>
      </div>
      <div class="header-btns-info f-r-cc" v-if="user_store.is_login">
        <img :src="$imgUrl(user_info.avatar, 'avImgUrl')" @click="toPage('Center')" class="header-info-av" alt="" />
        <el-dropdown placement="bottom" @command="dropdownChange" popper-class="custom-dropdown" class="custom-dropdown" v-if="localStore.innerWidth > 768">
          <div class="cursor f-r-cc">
            <span class="name">{{ user_info && user_info.nickname }}</span>
            <el-icon :size="16" color="#7285A0"><CaretBottom /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="1">个人中心</el-dropdown-item>
              <el-dropdown-item command="2">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
  <div>
    <el-drawer
      class="custom_drawer"
      v-model="drawerMenu"
      direction="ltr"
      :with-header="false"
      size="100%"
    >
      <div class="menu">
        <p class="menu_item" v-for="(item, index) in nav_list" :key="index" :class="route.name == item.route ? 'active' : ''" @click="navChange(index, item)">{{ item.name }}</p>
        <p :class="route.name == 'Downloads' ? 'active' : ''" class="menu_item" @click="download">下载APP</p>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { useUser } from '@/stores/user'
import { CaretBottom, Fold, Expand } from '@element-plus/icons-vue'
import { getMenus } from '@/api/index.js'
import { useLocal } from '@/stores/local'
const localStore = useLocal()
const router = useRouter()
const route = useRoute()
const user_store = useUser()

const drawerMenu = ref(false)

const is_home = computed(() => {
  return route.name === 'Home'
})

const current_nav = computed(() => user_store.current_nav)
const nav_list = ref([])

const user_info = computed(() => {
  return user_store.user_info
})

function openMenu() {
  drawerMenu.value = !drawerMenu.value
}

function navChange(index, item) {
  drawerMenu.value = false
  user_store.current_nav = index
  router.push({
    name: item.route
  })
}

// 跳转到APP下载
function download() {
  drawerMenu.value = false
  router.push({
    name: 'Downloads'
  })
}

// 路由跳转
function toPage(name) {
  drawerMenu.value = false
  router.push({ name })
}

function toLogin() {
  router.push({
    name: 'Login'
  })
}

function dropdownChange(e) {
  if (e == 1) {
    // 个人中心
    router.push({
      name: 'Center'
    })
  } else if (e == 2) {
    // 退出登录
    user_store.logOut()
    router.push({
      name: 'Login'
    })
  }
}

const getMenusData = async () => {
  let res = await getMenus()
  nav_list.value = res.data
  user_store.nav_name_list = res.data.map((item) => item.route)
  user_store.current_nav = res.data.findIndex((item) => item.route == route.name)
}

onMounted(() => {
  getMenusData()
})
</script>

<style scoped lang="less">
@import '@/assets/css/header.less';
@media screen and (max-width: 768px) {
  @import '@/assets/css/mobile/header.less';
}
</style>
